<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				
				Type : "column",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
			Credits : {
				Enabled:false
			},
			
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			
		    Legend : {
				Enabled:false
		    },
			
		    YAxis : {
		        LineColor : "#7F7F7F",
		        TickInterval : 50,
				GridLineDashStyle : "solid",
		        GridLineWidth : 1,
		        GridLineColor : "#C4C9CD",
		        LineWidth : 1,
		        Labels:{
		        	   Align : "center",
		        	   Rotation : 270
		        },
		        Title : {
		            Text : "값",
		            Margin : 30
		        }
		    }
		}
		
		myChart.SetOptions(cfg);
		myChart.DoSearch("../data/chartdata.xml");
		
		myChart.Draw();
		
	});
	
	function runCmd() {
		var cmd = $('#cmdDown').val();
		eval(cmd);
		
		myChart.Draw();
	}
	
	function doAction(str) {
		switch(str) {
		case 'search':
			var a = "";			
			switch(document.getElementById("sel_XAlign").value){
				case "LEFT":
					a = "left";
				break;	
				case "CENTER":
					a = "center";
				break;
				case "RIGHT":
					a = "right";
				break;
			}
			var axis = myChart.GetXAxis(0);					
			axis.SetOptions({
				Labels:{
					Enabled:true,
					Align:a,
					Rotation:eval(document.getElementById("txt_XRotation").value),
					Step:1
				}
			},1);				
			myChart.Draw();
			break;
			
		case 'search2':
			var axis = myChart.GetYAxis(0);
			var booleanOpp = false;
			if(document.getElementById("sel_YOpposite").value=="RIGHT") booleanOpp = true;
			
			axis.SetOptions({
				Opposite:booleanOpp
			},1);
			myChart.Draw();
			break;
		}
	}
	
	function myChart_OnSearchEnd(Code, Msg) {
		var count = myChart.GetSeriesCount();
		if(count < 1) {
			alert("조회된 결과가 없습니다.");
		}
	}
	
</script>
<title>X,Y축 정렬 기울임 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">X,Y축 정렬 기울임 예제</div>
	<div id="desc">
		ToolTip 툴팁을 설정한다.
		설정 값은 JSON 타입으로 설정한다.
	</div>

	<div id="functionArea">
		<div> X축 레이블 정렬 및 기울임 :  
			<select class="input_all" id="sel_XAlign" title="정렬">
				<option value="RIGHT" >오른쪽</option>
				<option value="CENTER" >가운데</option>
				<option value="LEFT" >왼쪽</option>
			</select>
			&nbsp;
			<input type="text" id="txt_XRotation" class="inputbox2" style="width:25px" maxlength="3"  value="-45">
			&nbsp;
			<input type="button" value="확인" onClick="doAction('search')">
		</div>
		
		<div> Y축 위치 :  
			<select class="input_all" id="sel_YOpposite" title="정렬">
				<option value="LEFT" >왼쪽</option>
				<option value="RIGHT" >오른쪽</option>
			</select>
			&nbsp;
			<input type="button" value="확인" onClick="doAction('search2')">
		</div>
		
		<input type="button" id="btnExe" value="설정 적용" onclick="runCmd()">
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>